<template>
  <div>
    <!-- $reouter,forwad需要执行 -->
    <button @click="$router.forward()">前进</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.go(-2)">后退2</button>
    <h1>HOME</h1>
    <!--  to属性为必填属性,后面传入的参数和$router.push中传入的location一致,内部也是调用的是$router.push   -->
    <router-link to="/home/music" replace tag="button" active-class="active"
      >music</router-link
    >
    <router-link
      :to="{ path: '/home/work' }"
      replace
      tag="button"
      active-class="active"
      >work</router-link
    >
    <router-link
      :to="{ name: 'play' }"
      replace
      tag="button"
      active-class="active"
      >play</router-link
    >
    <!-- 路由占位符,当前路由的子路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {},
}
</script>

<style>
button {
  height: 30px;
  width: 100px;
  border: none;
}
.active {
  background: orange;
  color: #fff;
}
</style>
